<template>
  <el-row :gutter="20" type="flex">
    <el-col :span="10">
      <div class="provisions">
        <NewCard title="解答列表" :isright="true">
          <template #right>
            <el-input
              placeholder="搜索解答"
              style="margin-right: 10px"
              v-model="searchvalue"
            ></el-input>
            <el-button
              type="primary"
              round
              class="searchBtn"
              @click="search(searchvalue)"
              >搜索</el-button
            >
          </template>
          <div class="articleslaw" v-if="lawList.length">
            <ul>
              <li class="fristli">解答名称</li>
              <li v-for="(law, index) in lawList" :key="index">
                <p
                  @click="select(law, index)"
                  :class="{ activeindex: currentIndexid == law.id }"
                >
                  {{ law.title }}
                  <span>{{ law.background }}</span>
                </p>
              </li>
            </ul>
            <div class="pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 40]"
                :pager-count="5"
                layout="total, prev, pager, next, jumper"
                :total="pageing.total"
              >
              </el-pagination>
            </div>
          </div>
          <el-empty
            class="empty"
            description="暂无专家解答"
            :image-size="100"
            v-else
          ></el-empty>
        </NewCard>
      </div>
    </el-col>
    <el-col :span="16">
      <div class="provisions law-detailsBox">
        <NewCard :title="titlename" :isright="true">
          <template #right>
            <el-input
              placeholder="搜索解答信息"
              style="margin-right: 10px"
              @keyup.enter.native="searchinfoclick(searchinfo)"
              v-model="searchinfo"
            ></el-input>
          </template>
          <div class="law-details" v-if="lawDetails.length">
            <el-checkbox-group v-model="checkLaw">
              <el-checkbox
                @change="
                  (content) => {
                    selectLawFn(content, law, lawDetails);
                  }
                "
                :label="law.content"
                v-for="(law, index) in lawDetails"
                :key="index"
              ></el-checkbox>
            </el-checkbox-group>
          </div>
          <el-empty
            class="empty"
            description="暂无专家解答"
            :image-size="100"
            v-else
          ></el-empty>

          <SubBtn>
            <template slot="btn">
              <p>
                <i class="el-icon-postcard"></i>
                已选 <span>{{ checkLaw.length }}</span> 条
              </p>
              <el-button type="primary" round @click="submit"
                >插入解答</el-button
              >
            </template>
          </SubBtn>
        </NewCard>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/components/subBtn/subBtn.vue";
import {
  getLawListTitleApi,
  getLawInfoApi,
  getOverallQaListApi,
} from "@/wss/newApi_3-24/doc/law.js";
export default {
  components: { NewCard, SubBtn },
  name: "anser",
  data() {
    return {
      searchvalue: "", //搜索框的值
      searchinfo: "",
      currentIndexid: "", //高亮值
      newsearchinfo: [],
      arraylist: [],
      isActive: 0,
      //当前激活的项目条件
      activeNames: [0],
      //法条列表
      lawList: [],
      newlawList: [],
      // 当前选中的法条详情
      lawDetails: [],
      // 选中的法条
      checkLaw: [],
      titlename: "", //
      // 新的选中的法条
      newCheckLaw: [],
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
    };
  },
  created() {
    // this.getLawListTitleFn();
  },
  methods: {
    // bln是否选中，law当前选中的法条，title法律标题
    selectLawFn(bln, law, { title, id }) {
      // 判断是否已存在
      if (bln) {
        law.lawTitle = title;
        law.lawId = id;
        this.newCheckLaw.push(law);
        // 已存在就删除
      } else {
        let index = this.newCheckLaw.findIndex((item) => item.id === law.id);
        this.newCheckLaw.splice(index, 1);
      }
    },
    // 查询对应的解答数据
    async getLawListTitleFn() {
      const { pageNum, pageSize } = this.pageing;
      const { data, rows } = await getOverallQaListApi({
        pageNum,
        pageSize,
        title: this.searchvalue ? this.searchvalue : "标准",
      });
      this.pageing.total = data.total;
      this.lawList = data.rows;
      console.log(this.lawList, "111111");
      this.newlawList = data.rows;
      this.checkLaw = [];
    },
    async select(law, index) {
      this.currentIndexid = law.id;
      this.lawDetails = law.answer;
      this.titlename = law.title;
    },
    submit() {
      // 当点击确认的时候，把数据子传父,通知父组件关闭子组件
      let newCheckLaw = JSON.parse(JSON.stringify(this.newCheckLaw));
      newCheckLaw = newCheckLaw.map((item) => {
        console.log(Array.isArray(item.content));
        if (Array.isArray(item.content)) {
          item.content = item.content.join("");
        }
        return item;
      });
      // console.log(newCheckLaw,"2222");
      this.$emit("handleranser", newCheckLaw);
    },
    Animation(val) {
      this.checkLaw = val;
    },
    //过滤法条
    search(value) {
      this.searchvalue = value;
      this.getLawListTitleFn();
    },
    //多路对应法条数据
    async searchinfoclick(value) {
      let list = this.newsearchinfo.info;
      let newArr = this.arraylist.info;
      if (value == "") {
        this.lawDetails = this.arraylist.info;
      }
      list =
        newArr &&
        newArr.filter((item) => {
          return item.content.length && item.content.join("").includes(value);
        });
      this.lawDetails.info = list;
    },
    // 当前页发生改变时
    handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getLawListTitleFn();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getLawListTitleFn();
    },
  },
};
</script>

<style scoped>
ul,
h3,
h4,
p {
  margin: 0;
  padding: 0;
  list-style: none;
}
.right .el-input {
  width: 120px;
}
.right .searchBtn {
  background-color: #f87a23;
  border-color: #f87a23;
  padding: 8px 20px;
}
.el-card {
  position: relative;
}
>>> .top .left h1 {
  flex-wrap: nowrap;
}
.law-detailsBox >>> .top .left {
  flex: 3;
}
.law-detailsBox >>> .top .left h1 {
  display: flex;
}
.law-detailsBox >>> .top .left h1 > b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.law-detailsBox >>> .top .leftSearch {
  margin: 20px 10px;
}
.empty {
  height: 92%;
}
/* 法条列表 */
/* ::v-deep .el-collapse .el-collapse-item__header,
::v-deep .el-collapse .el-collapse-item__header.focusing {
  font-size: 14px;
  font-weight: 600;
  color: #2e3f5e;
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
}
::v-deep .el-collapse .el-collapse-item__wrap {
  border-bottom: 0;
}
::v-deep .el-collapse .el-collapse-item__content {
  padding-bottom: 0;
}
::v-deep .el-collapse .el-icon-arrow-right:before {
  content: "\E790";
}
::v-deep .el-collapse .el-collapse-item__arrow.is-active {
  transform: rotate(180deg);
}

.el-collapse ul > li {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
  color: #2e3f5e;
} */
.articleslaw ul {
  padding-bottom: 70px;
}
.articleslaw ul > li {
  font-size: 14px;

}
.articleslaw .fristli {
  padding: 10px 30px;
  font-size: 14px;
  color: #a7aeb9;
}

.articleslaw ul li p {
  padding: 15px 30px;
  /* display: flex;
  flex-direction: column; */
    line-height: 21px;
    color: #333;
    padding-top: 15px;
    margin-bottom: 12px;

}
.articleslaw ul li p span {
  padding-top: 5px;
  color: #a7aeb9;
  font-size: 12px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* 法条详情 */
.law-details {
  margin-top: 20px;
  margin-bottom: 60px;
}
.el-checkbox-group .el-checkbox {
  display: flex;
  white-space: normal;
  margin-right: 0;
  margin-bottom: 20px;
  padding: 0 30px;
}
::v-deep .el-checkbox-group .el-checkbox .el-checkbox__label {
  line-height: 28px;
}
::v-deep .el-checkbox-group .el-checkbox.is-checked .el-checkbox__label {
  color: #f87a23;
}
::v-deep .el-checkbox-group .el-checkbox .el-checkbox__input {
  margin-top: 3px;
}

::v-deep .el-checkbox .el-checkbox__inner {
  width: 20px;
  height: 20px;
  border-color: #bbbbbb;
  background: #fff;
  border-radius: 50%;
}
::v-deep .el-checkbox .is-disabled .el-checkbox__inner {
  background: #f2f2f2;
}
::v-deep .el-checkbox .is-checked .el-checkbox__inner {
  border-color: #f87a23;
  background: #f87a23;
}
::v-deep .el-checkbox__input .el-checkbox__inner::after {
  content: "";
  width: 9px;
  height: 5px;
  border: 3px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  vertical-align: middle;
  transform: rotate(0deg) scaleY(0);
  border-radius: 0px;
  background: none;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner::after {
  transform: rotate(-45deg) scaleY(1);
}

/* 右侧按钮样式 */
::v-deep .subBtn {
  align-items: center;
  justify-content: space-between;
  padding: 8px 30px !important;
  height: 50px;
  z-index: 99;
}
::v-deep .subBtn > p {
  color: #364764;
}
::v-deep .subBtn > p > i {
  color: #bbb;
}
::v-deep .subBtn > p > span {
  color: #f87a23;
}
::v-deep .subBtn > .el-button {
  width: 100px;
  padding: 8px 0 !important;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn > .el-button.el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
.provisions {
  height: 100%;
}
>>> .provisions .el-card__body {
  padding: 0;
}
>>> .provisions .el-card__body .top {
  padding: 0 15px;
}
>>> .provisions .el-collapse .el-collapse-item__header {
  padding: 0 30px;
}

/* >>> .provisions ul li p {
  padding: 0 30px;
} */
/* 高亮 */
.activeindex {
  background-color: #ebecf0;
}
/* 分页 */
.pagination {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: white;
  text-align: center;
  padding: 20px 0;
}
</style>
